<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="rolePage">
        <el-row>
          <el-col :sm="11">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item"
              @change="fetchData()"
            />
          </el-col>
          <el-col :sm="13" style="text-align: left">
            <div class="title">碎片率</div>
          </el-col>
        </el-row>

      </div>
    </div>
    <el-row v-if="list.shardsDate.length > 0" class="table">
      <table style="width: 100%" border="0" cellspacing="0">
        <thead>
          <tr>
            <th id="lineTd">
              <span style="float:left;margin-top:20px;">线别</span>
              <span style="float:right;margin-top:3px;">日期</span>
            </th>
            <th v-for="(item, index) in list.shardsDate" :key="index">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>原损目标</td>
            <td v-for="(item, index) in list.originalLossGoal" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>工损目标</td>
            <td v-for="(item, index) in list.workLossGoal" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>1L原损</td>
            <td v-for="(item, index) in list.originalLoss1" :key="index">{{ item }}</td>
          </tr>

          <tr>
            <td>1L工损</td>
            <td v-for="(item, index) in list.workLoss1" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>2L原损</td>
            <td v-for="(item, index) in list.originalLoss2" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>2L工损</td>
            <td v-for="(item, index) in list.workLoss2" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>3L原损</td>
            <td v-for="(item, index) in list.originalLoss3" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>3L工损</td>
            <td v-for="(item, index) in list.workLoss3" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>4L原损</td>
            <td v-for="(item, index) in list.originalLoss4" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>4L工损</td>
            <td v-for="(item, index) in list.workLoss4" :key="index">{{ item }}</td>
          </tr>

        </tbody>
      </table>
    </el-row>

    <el-row
      style="background:#fff;padding:16px 16px 0;margin-bottom:32px;display: flex;justify-content: space-between;"
    >
      <!-- 一线折柱混合图 -->
      <line-chart title-name="L1碎片率" :chart-data="line1ChartData" />
      <!-- 二线折柱混合图 -->
      <line-chart title-name="L2碎片率" :chart-data="line2ChartData" />
    </el-row>

    <el-row
      style="background:#fff;padding:16px 16px 0;margin-bottom:32px;display: flex;justify-content: space-between;"
    >
      <!-- 三线折柱混合图 -->
      <line-chart title-name="L3碎片率" :chart-data="line3ChartData" />
      <!-- 四线折柱混合图 -->
      <line-chart title-name="L4碎片率" :chart-data="line4ChartData" />
    </el-row>

  </div>
</template>
<script>
import './css/index.scss'
import { shardsAllItems } from '@/api/report'
import LineChart from './components/motionChart'
export default {
  components: {
    LineChart
  },
  data: function() {
    return {
      activeCardName: 'all',
      dialogFormVisible: false,
      dialogSee: false,
      list: {
        shardsDate: [],
        originalLossGoal: [],
        workLossGoal: [],

        originalLoss1: [],
        workLoss1: [],
        originalLoss2: [],
        workLoss2: [],
        originalLoss3: [],
        workLoss3: [],
        originalLoss4: [],
        workLoss4: []
      },
      dateRange: [],
      line1ChartData: {
        timeList: [],
        // 原损
        motionGoal: [],
        name: '原损',
        name2: '工损',
        // 工损
        lineData: []

      },
      line2ChartData: {
        timeList: [],
        motionGoal: [],
        name: '原损',
        name2: '工损',
        lineData: []
      },
      line3ChartData: {
        timeList: [],
        motionGoal: [],
        name: '原损',
        name2: '工损',
        lineData: []
      },
      line4ChartData: {
        timeList: [],
        motionGoal: [],
        name: '原损',
        name2: '工损',
        lineData: []
      }
    }
  },
  created() {
    // 获取数据
    // this.fetchData();
  },
  methods: {
    async fetchData() {
      const params = {
        pageNum: 1,
        pageSize: 100,

        starTime: '',
        endTime: ''
      }
      if (this.dateRange) {
        const start = this.getTime(this.dateRange[0])
        const end = this.getTime(this.dateRange[1])
        params.starTime = start
        params.endTime = end
      }
      const data = await shardsAllItems(params)
      this.list = this.formatDate(data.data.content)

      this.line1ChartData.timeList = this.list.shardsDate
      this.line1ChartData.motionGoal = this.list.originalLoss1
      this.line1ChartData.lineData = this.list.workLoss1

      this.line2ChartData.timeList = this.list.shardsDate
      this.line2ChartData.motionGoal = this.list.originalLoss2
      this.line2ChartData.lineData = this.list.workLoss2

      this.line3ChartData.timeList = this.list.shardsDate
      this.line3ChartData.motionGoal = this.list.originalLoss3
      this.line3ChartData.lineData = this.list.workLoss3

      this.line4ChartData.timeList = this.list.shardsDate
      this.line4ChartData.motionGoal = this.list.originalLoss4
      this.line4ChartData.lineData = this.list.workLoss4
      console.log('list', this.list)
    },
    formatDate(data) {
      const list = {
        shardsDate: [],
        originalLossGoal: [],
        workLossGoal: [],

        originalLoss1: [],
        workLoss1: [],
        originalLoss2: [],
        workLoss2: [],
        originalLoss3: [],
        workLoss3: [],
        originalLoss4: [],
        workLoss4: []
      }
      data.forEach(item => {
        console.log('item', item)
        list.shardsDate.push(item.shardsDate)
        const originalLossGoalInt = new Number(item.originalLossGoal).toFixed(2)
        list.originalLossGoal.push(originalLossGoalInt)
        const workLossGoalInt = new Number(item.workLossGoal).toFixed(2)
        list.workLossGoal.push(workLossGoalInt)

        const originalLoss1Int = new Number(item.originalLoss1).toFixed(2)
        list.originalLoss1.push(originalLoss1Int)
        const workLoss1Int = new Number(item.workLoss1).toFixed(2)
        list.workLoss1.push(workLoss1Int)
        const originalLoss2Int = new Number(item.originalLoss2).toFixed(2)
        list.originalLoss2.push(originalLoss2Int)
        const workLoss2Int = new Number(item.workLoss2).toFixed(2)
        list.workLoss2.push(workLoss2Int)
        const originalLoss3Int = new Number(item.originalLoss3).toFixed(2)
        list.originalLoss3.push(originalLoss3Int)
        const workLoss3Int = new Number(item.workLoss3).toFixed(2)
        list.workLoss3.push(workLoss3Int)
        const originalLoss4Int = new Number(item.originalLoss4).toFixed(2)
        list.originalLoss4.push(originalLoss4Int)
        const workLoss4Int = new Number(item.workLoss4).toFixed(2)
        list.workLoss4.push(workLoss4Int)
      })
      return list
    },
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style lang="scss" scoped>
.userlist {
    margin-right: 10px;
}

#lineTd {
    background: #fff url() no-repeat 100% center;
}

.title {
    height: 20px;
    padding-left: 5px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 23px;
    display: inline-block;
}

// table
.hidden {
    display: none;
}

table {
    border-collapse: separate;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
}

thead tr th {
    background-color: #f8f8f9;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}

tbody tr td {
    padding: 6px;
    text-align: center;
    height: 34px; //设置单元格最小高度
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}
</style>
